<template>
  <el-row>
    <!--      借款订单信息-->
    <el-card v-if="Object.keys(loanOrderInfoData).length > 0" v-loading="loanOrderLoading">
      <el-collapse accordion value="1">
        <el-collapse-item name="1">
          <template slot="title">
            {{ $t('loanOrderDetails.title') }}
          </template>
          <table>
            <tr>
              <td>{{ $t('loanOrderDetails.list.orderNo') }}</td>
              <td>{{ loanOrderInfoData['orderNo'] }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.creditOrderNo') }}</td>
              <td>{{ loanOrderInfoData['creditOrderNo'] }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.stringCreateTime') }}</td>
              <td>{{ loanOrderInfoData['stringCreateTime'] }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.userGrade') }}</td>
              <td>{{ loanOrderInfoData['userGrade'] }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.orderType') }}</td>
              <td>{{ $t('loanOrderDetails.orderType')[loanOrderInfoData["loanProductType"]] }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.orderPeriods') }}</td>
              <td>{{ loanOrderInfoData['applyMonth'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.loanProductName') }}</td>
              <td>{{ loanOrderInfoData['loanProductName'] }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.lendRate') }}</td>
              <td>
                {{ loanOrderInfoData['lendRate'] ? (loanOrderInfoData['lendRate'] * 100).toFixed(2) + '%' : 0 }}
              </td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.auditRate') }}</td>
              <td>
                {{ loanOrderInfoData['auditRate'] ? (loanOrderInfoData['auditRate'] * 100).toFixed(2) + '%' : 0 }}
              </td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.technologyRate') }}</td>
              <td>
                {{ loanOrderInfoData['technologyRate'] ? (loanOrderInfoData['technologyRate'] * 100).toFixed(2) + '%' : 0 }}
              </td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.gracePeriod') }}</td>
              <td>{{ loanOrderInfoData['gracePeriod'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.gracePeriodDayRate') }}</td>
              <td>
                {{ loanOrderInfoData['gracePeriodDayRate'] ? (loanOrderInfoData['gracePeriodDayRate'] * 100).toFixed(2) + '%' : 0 }}
              </td>
            </tr>

            <tr>
              <td>{{ $t('loanOrderDetails.list.overdueDayRate') }}</td>
              <td>
                {{ loanOrderInfoData['overdueDayRate'] ? (loanOrderInfoData['overdueDayRate'] * 100).toFixed(2) + '%' : 0 }}
              </td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.auditMoney') }}</td>
              <td>{{ loanOrderInfoData['applyMoney'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.loanDays') }}</td>
              <td>{{ loanOrderInfoData['loanDays'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.monthAuditCharge') }}</td>
              <td>{{ loanOrderInfoData['monthAuditCharge'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.monthTechnologyCharge') }}</td>
              <td>{{ loanOrderInfoData['monthTechnologyCharge'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.lendRateMoney') }}</td>
              <td>{{ loanOrderInfoData['lendRateMoney'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.loanRepay') }}</td>
              <td>{{ loanOrderInfoData['payMoney'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.currentRepay') }}</td>
              <td>{{ loanOrderInfoData['currentRepay'] || 0 }}</td>
            </tr>
            <!--优惠券-->
            <tr>
              <td>{{ $t('loanOrderDetails.list.couponMoney') }}</td>
              <td>{{ loanOrderInfoData['couponMoney'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.dueDays') }}</td>
              <td>{{ loanOrderInfoData['dueDays'] || 0 }}</td>
            </tr>

            <tr>
              <td>{{ $t('loanOrderDetails.list.overDueRateMoney') }}</td>
              <td>{{ loanOrderInfoData['overDueRateMoney'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.currentRealRepay') }}</td>
              <td>{{ loanOrderInfoData['currentRealRepay'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.realRepayMoney') }}</td>
              <td>{{ loanOrderInfoData['realRepayMoney'] || 0 }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.realRepaymentDate') }}</td>
              <td>{{ loanOrderInfoData['realRepaymentDateStr'] }}</td>
            </tr>
            <tr>
              <td>{{ $t('loanOrderDetails.list.status') }}</td>
              <td>{{ $t('loanOrderDetails.orderStatus')[loanOrderInfoData['status']] }}</td>
            </tr>
          </table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <!-- 收款账户 -->
    <el-card v-if="withdrawalInfoData.length > 0" v-loading="withdrawalLoading">
      <el-collapse accordion value="1">
        <el-collapse-item name="1">
          <template slot="title">
            {{ $t('withdrawalDetail.title') }}
          </template>
          <table>
            <tr v-for="(item, index) in $t('withdrawalDetail.list')" :key="index">
              <td>{{ item.name }}</td>
              <td>
                <span v-if="item.reflect !== 'accountType'">
                  {{ withdrawalInfoData[0][item.reflect] }}
                </span>
              </td>
            </tr>
          </table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <!--    放款详情 & 放款流水-->
    <el-card v-if="loanData.length > 0" v-loading="loanLoading">
      <el-collapse accordion value="1">
        <el-collapse-item name="1">
          <template slot="title">
            {{ $t('loanDetails.title') }}
          </template>
          <el-table
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="loanData"
            border
            :stripe="true"
            style="width: 100%"
          >
            <el-table-column
              prop="applyMoney"
              :label="$t('loanDetails.list.applyMoney')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['applyMoney'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="beforehandCharge"
              :label="$t('loanDetails.list.beforehandCharge')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['beforehandCharge'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="payMoney"
              :label="$t('loanDetails.list.payMoney')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['payMoney'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentResult"
              :label="$t('loanDetails.list.paymentResult')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ $t('loanDetails.paymentResult')[scope.row['paymentResult']] }}
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="loanData"
            border
            :stripe="true"
            style="width: 100%;margin-top: 20px"
          >
            <el-table-column
              prop="paymentChannelStr"
              :label="$t('loanDetails.turnover.paymentChannel')"
              min-width="120"
            />
            <el-table-column
              prop="serialNumber"
              :label="$t('loanDetails.turnover.serialNumber')"
              min-width="120"
            />
            <el-table-column
              prop="createTimeStr"
              :label="$t('loanDetails.turnover.createTime')"
              min-width="170"
            />
            <el-table-column
              prop="transferType"
              :label="$t('loanDetails.turnover.transferType')"
              min-width="120"
            >
              <template>
                {{ $t('loanDetails.transferType') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="payMoney"
              :label="$t('loanDetails.turnover.payMoney')"
              min-width="100"
            >
              <template slot-scope="scope">
                {{ scope.row['payMoney'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentResult"
              :label="$t('loanDetails.turnover.paymentResult')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ $t('loanDetails.paymentResult')[scope.row['paymentResult']] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="payDateStr"
              :label="$t('loanDetails.turnover.payDate')"
              min-width="170"
            />
            <el-table-column
              prop="operator"
              :label="$t('loanDetails.turnover.operator')"
              min-width="120"
            >
              <template slot-scope="scope">
                {{ $t('loanDetails.operator')[scope.row['operator']] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="option"
              :label="$t('loanDetails.turnover.option')"
              min-width="200"
            />
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <!-- 还款详情 -->
    <el-card v-if="repaymentData.length > 0">
      <el-collapse accordion value="1">
        <el-collapse-item name="1">
          <template slot="title">
            {{ $t('repaymentDetails.title') }}
          </template>
          <el-table
            v-loading="repaymentLoading"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="repaymentData"
            border
            :stripe="true"
            style="width: 100%"
          >
            <el-table-column
              prop="applyMoney"
              :label="$t('repaymentDetails.list.period')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['currentPeriod'] }} / {{ scope.row['totalPeriod'] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="applyMoney"
              :label="$t('repaymentDetails.list.applyMoney')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['applyMoney'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="currentRepay"
              :label="$t('repaymentDetails.list.currentRepay')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['currentRepay'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="principal"
              :label="$t('repaymentDetails.list.principal')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['principal'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="interestMoney"
              :label="$t('repaymentDetails.list.interestMoney')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['interestMoney'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="otherCost"
              :label="$t('repaymentDetails.list.otherCost')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['otherCost'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="overDueFine"
              :label="$t('repaymentDetails.list.overDueFine')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['overDueFine'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="realRepayMoney"
              :label="$t('repaymentDetails.list.realRepayMoney')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['realRepayMoney'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentResult"
              :label="$t('repaymentDetails.list.status')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ $t('repaymentDetails.status')[scope.row['status']] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentResult"
              :label="$t('repaymentDetails.list.manage')"
              min-width="150"
            >
              <template>
                <el-button type="text" @click="repaymentCode">{{ $t('repaymentDetails.manage') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-loading="streamLoading"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="streamData"
            border
            :stripe="true"
            style="width: 100%;margin-top: 20px"
          >
            <el-table-column
              prop="repayType"
              :label="$t('repaymentDetails.turnover.repayType')"
              min-width="120"
            >
              <template slot-scope="scope">
                {{ $t('repaymentDetails.allRepayType')[scope.row['repayType']] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="serialNumber"
              :label="$t('repaymentDetails.turnover.serialNumber')"
              min-width="120"
            />
            <el-table-column
              prop="vaNumber"
              :label="$t('repaymentDetails.turnover.vaNumber')"
              min-width="120"
            />
            <el-table-column
              prop="createTime"
              :label="$t('repaymentDetails.turnover.createTime')"
              min-width="170"
            />
            <el-table-column
              prop="transferType"
              :label="$t('repaymentDetails.turnover.transferType')"
              min-width="120"
            >
              <template slot-scope="scope">
                {{ $t('repaymentDetails.transferType')[scope.row['transferType']] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="repayMoney"
              :label="$t('repaymentDetails.turnover.repayMoney')"
              min-width="100"
            >
              <template slot-scope="scope">
                {{ scope.row['repayMoney'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="operationResult"
              :label="$t('repaymentDetails.turnover.result')"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ $t('repaymentDetails.result')[scope.row['paymentResult']] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="repaymentDateStr"
              :label="$t('repaymentDetails.turnover.repaymentDate')"
              min-width="170"
            />
            <el-table-column
              prop="operator"
              :label="$t('repaymentDetails.turnover.operator')"
              min-width="120"
            >
              <template slot-scope="scope">
                {{ $t('repaymentDetails.operator')[scope.row['operator']] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="description"
              :label="$t('repaymentDetails.turnover.description')"
              min-width="200"
            />
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </el-row>
</template>

<script>
import { orderDetail, bankcardByOrderId, paymentDetail, repaymentPlanList, manualRepaymentList } from '@/api/order'
export default {
  name: 'OrderDetail',
  data() {
    return {
      para: this.$route.query,
      loanOrderLoading: true,
      loanOrderInfoData: {},
      withdrawalLoading: true,
      withdrawalInfoData: [],
      loanData: [],
      loanLoading: true,
      repaymentData: [],
      streamData: [],
      repaymentLoading: true,
      streamLoading: true
    }
  },
  mounted() {
    this.getLoanOrderInfoData()
    this.getWithdrawalInfoData()
    this.getLoanData()
    this.getRepaymentData()
    this.getStreamData()
  },
  methods: {
    getLoanOrderInfoData() {
      orderDetail(this.para['orderId'])
        .then(res => {
          this.loanOrderLoading = false
          if (res.success) {
            this.loanOrderInfoData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loanOrderLoading = false
          this.$message.error(err.message)
        })
    },
    getWithdrawalInfoData() {
      bankcardByOrderId(this.para['orderId'])
        .then(res => {
          this.withdrawalLoading = false
          if (res.success) {
            this.withdrawalInfoData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.withdrawalLoading = false
          this.$message.error(err.message)
        })
    },
    getLoanData() {
      paymentDetail(this.para['orderId'])
        .then(res => {
          this.loanLoading = false
          if (res.success) {
            this.loanData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loanLoading = false
          this.$message.error(err.message)
        })
    },
    getRepaymentData() {
      repaymentPlanList(this.para['orderId'])
        .then(res => {
          this.repaymentLoading = false
          if (res.success) {
            this.repaymentData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.repaymentLoading = false
          this.$message.error(err.message)
        })
    },
    getStreamData() {
      manualRepaymentList(this.para['orderId'])
        .then(res => {
          this.streamLoading = false
          if (res.success) {
            this.streamData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.streamLoading = false
          this.$message.error(err.message)
        })
    },
    repaymentCode() {
      this.$router.push({
        name: 'repaymentCode',
        query: {
          orderId: this.para['orderId']
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  table{
    width: 100%;
    border-collapse: collapse;
    tr{
      width: 100%;
      text-align: center;
      td{
        height: 50px;
        border: 1px #cccccc solid;
      }
    }
  }
  .el-card{
    margin: 10px;
  }
</style>
